<div class="w-full max-w-3xl">

    <!-- Form -->
    <form [formGroup]="accountForm">

        <!-- Section -->
        <div class="w-full">
            <div class="text-xl">Profile</div>
            <div class="text-secondary">Following information is publicly displayed, be careful!</div>
        </div>
        <div class="grid sm:grid-cols-4 gap-6 w-full mt-8">
            <!-- Name -->
            <div class="sm:col-span-4">
                <mat-form-field class="fuse-mat-no-subscript w-full">
                    <mat-label>Name</mat-label>
                    <mat-icon
                        class="icon-size-5"
                        [svgIcon]="'heroicons_solid:user'"
                        matPrefix></mat-icon>
                    <input
                        [formControlName]="'name'"
                        matInput>
                </mat-form-field>
            </div>
            <!-- Username -->
            <div class="sm:col-span-4">
                <mat-form-field class="fuse-mat-no-subscript fuse-mat-emphasized-affix w-full">
                    <mat-label>Username</mat-label>
                    <div
                        class="text-secondary"
                        matPrefix>
                        fusetheme.com/
                    </div>
                    <input
                        [formControlName]="'username'"
                        matInput>
                </mat-form-field>
            </div>
            <!-- Title -->
            <div class="sm:col-span-2">
                <mat-form-field class="fuse-mat-no-subscript w-full">
                    <mat-label>Title</mat-label>
                    <mat-icon
                        class="icon-size-5"
                        [svgIcon]="'heroicons_solid:briefcase'"
                        matPrefix></mat-icon>
                    <input
                        [formControlName]="'title'"
                        matInput>
                </mat-form-field>
            </div>
            <!-- Company -->
            <div class="sm:col-span-2">
                <mat-form-field class="fuse-mat-no-subscript w-full">
                    <mat-label>Company</mat-label>
                    <mat-icon
                        class="icon-size-5"
                        [svgIcon]="'heroicons_solid:office-building'"
                        matPrefix></mat-icon>
                    <input
                        [formControlName]="'company'"
                        matInput>
                </mat-form-field>
            </div>
            <!-- About -->
            <div class="sm:col-span-4">
                <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
                    <mat-label>About</mat-label>
                    <textarea
                        matInput
                        [formControlName]="'about'"
                        cdkTextareaAutosize
                        [cdkAutosizeMinRows]="5"></textarea>
                </mat-form-field>
                <div class="mt-1 text-md text-hint">Brief description for your profile. Basic HTML and Emoji are allowed.</div>
            </div>
        </div>

        <!-- Divider -->
        <div class="my-10 border-t"></div>

        <!-- Section -->
        <div class="w-full">
            <div class="text-xl">Personal Information</div>
            <div class="text-secondary">Communication details in case we want to connect with you. These will be kept private.</div>
        </div>
        <div class="grid sm:grid-cols-4 gap-6 w-full mt-8">
            <!-- Email -->
            <div class="sm:col-span-2">
                <mat-form-field class="fuse-mat-no-subscript w-full">
                    <mat-label>Email</mat-label>
                    <mat-icon
                        class="icon-size-5"
                        [svgIcon]="'heroicons_solid:mail'"
                        matPrefix></mat-icon>
                    <input
                        [formControlName]="'email'"
                        matInput>
                </mat-form-field>
            </div>
            <!-- Phone -->
            <div class="sm:col-span-2">
                <mat-form-field class="fuse-mat-no-subscript w-full">
                    <mat-label>Phone</mat-label>
                    <mat-icon
                        class="icon-size-5"
                        [svgIcon]="'heroicons_solid:phone'"
                        matPrefix></mat-icon>
                    <input
                        [formControlName]="'phone'"
                        matInput>
                </mat-form-field>
            </div>
            <!-- Country -->
            <div class="sm:col-span-2">
                <mat-form-field class="fuse-mat-no-subscript w-full">
                    <mat-label>Country</mat-label>
                    <mat-icon
                        class="icon-size-5"
                        [svgIcon]="'heroicons_solid:location-marker'"
                        matPrefix></mat-icon>
                    <mat-select [formControlName]="'country'">
                        <mat-option [value]="'usa'">United States</mat-option>
                        <mat-option [value]="'canada'">Canada</mat-option>
                        <mat-option [value]="'mexico'">Mexico</mat-option>
                        <mat-option [value]="'france'">France</mat-option>
                        <mat-option [value]="'germany'">Germany</mat-option>
                        <mat-option [value]="'italy'">Italy</mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
            <!-- Language -->
            <div class="sm:col-span-2">
                <mat-form-field class="fuse-mat-no-subscript w-full">
                    <mat-label>Language</mat-label>
                    <mat-icon
                        class="icon-size-5"
                        [svgIcon]="'heroicons_solid:globe-alt'"
                        matPrefix></mat-icon>
                    <mat-select [formControlName]="'language'">
                        <mat-option [value]="'english'">English</mat-option>
                        <mat-option [value]="'french'">French</mat-option>
                        <mat-option [value]="'spanish'">Spanish</mat-option>
                        <mat-option [value]="'german'">German</mat-option>
                        <mat-option [value]="'italian'">Italian</mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
        </div>

        <!-- Divider -->
        <div class="mt-11 mb-10 border-t"></div>

        <!-- Actions -->
        <div class="flex items-center justify-end">
            <button
                mat-stroked-button
                type="button">
                Cancel
            </button>
            <button
                class="ml-4"
                mat-flat-button
                type="button"
                [color]="'primary'">Save
            </button>
        </div>
    </form>

</div>
